<h2 style="margin-top:30px;">{{ str.application_personal }} <span>{{ str.application_personal_desc }}</span></h2>

{% if person.photo %}
<img id="application_photo_img" class="box" src="{{ person.photo.url }}/150/c" width="150" height="150" style="float:right; margin-top:15px; margin-right:10px;" />
{% else %}
<img id="application_photo_img" class="box" src="" width="150" height="150" style="float:right; margin-top:15px; margin-right:10px; display:none;" />
{% endif %}

<div class="vertical_table" style="width:700px; padding-top:10px;">
    <div class="table_row">
        <div class="header_cell" style="width:250px;">
            {{ str.forename }}:
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {{ person.forename|default:"" }}
            {% else %}
            <input id="person_forename" type="text" name="forename" class="autosave_person" value="{{ person.forename|default:"" }}" maxlength="500" />
            {% endif %}
        </div>
    </div>
    <div class="table_row">
        <div class="header_cell">
            {{ str.surname }}:
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {{ person.surname|default:"" }}
            {% else %}
            <input type="text" name="surname" class="autosave_person" value="{{ person.surname|default:"" }}" maxlength="500" />
            {% endif %}
        </div>
    </div>
    <div class="table_row">
        <div class="header_cell">
            {{ str.idcode }}:
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {{ person.idcode|default:"" }}
            {% else %}
            <input type="text" id="idcode" class="autosave_person" name="idcode" value="{{ person.idcode|default:"" }}" maxlength="500" />
            {% endif %}
        </div>
    </div>
    <div class="table_row">
        <div class="header_cell">
            {{ str.birthdate }}:
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {{ person.birth_date|date:"d.m.Y" }}
            {% else %}
            <select id="birthdate_day" name="birthdate_day" class="autosave_birthdate" >
                <option value=""></option>
                {% for d in date_days %}
                <option value="{{ d }}"{% if person.birth_date %}{% ifequal person.birth_date.day d %} selected{% endifequal %}{% endif %}>{{ d }}</option>
                {% endfor %}
            </select>
            <select id="birthdate_month" name="birthdate_month" class="autosave_birthdate"{% if application_readonly %} disabled{% endif %}>
                <option value=""></option>
                {% for m in date_months %}
                <option value="{{ forloop.counter }}"{% if person.birth_date %}{% ifequal person.birth_date.month forloop.counter %} selected{% endifequal %}{% endif %}>{{ m|capfirst }}</option>
                {% endfor %}
            </select>
            <select id="birthdate_year" name="birthdate_year" class="autosave_birthdate"{% if application_readonly %} disabled{% endif %}>
                <option value=""></option>
                {% for y in date_years %}
                <option value="{{ y }}"{% if person.birth_date %}{% ifequal person.birth_date.year y %} selected{% endifequal %}{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
            <input type="hidden" id="birthdate" name="birthdate" />
            {% endif %}
        </div>
    </div>
    <div class="table_row">
        <div class="header_cell">
            {{ str.gender }}:
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {% ifequal person.gender "male" %}{{ str.gender_male }}{% endifequal %}
            {% ifequal person.gender "female" %}{{ str.gender_female }}{% endifequal %}
            {% else %}
            <select id="gender" class="autosave_person" name="gender" {% if application_readonly %} disabled{% endif %}>
                <option value=""></option>
                <option value="female"{% ifequal person.gender "female" %} selected{% endifequal %}>{{ str.gender_female }}</option>
                <option value="male"{% ifequal person.gender "male" %} selected{% endifequal %}>{{ str.gender_male }}</option>
            {% endif %}
            </select>
        </div>
    </div>
    {% if application_readonly %}{% else %}
    <div class="table_row">
        <div class="header_cell">
            {{ str.photo }}:
        </div>
        <div class="table_cell">
            <iframe name="application_photo_iframe" height="0" width="0" frameborder="0" scrolling="no" onLoad="showPhoto(this.contentWindow.document.body.innerHTML);" style="display:none;"></iframe>
            <form id="application_photo_form" method="post" action="{{ photo_upload_url }}" target="application_photo_iframe" enctype="multipart/form-data">
                <input type="file" id="application_photo" name="file" style="border:none; width:80px;" />
                <input type="hidden" id="application_photo_key" name="key" value="{{ person.photo.key }}" />
                <input type="hidden" name="title" value="{{ str.photo }}" />
                <input type="hidden" name="types" value="person_photo application_document" />
                <input type="hidden" name="entities" value="{{ person.key }}" />
                <img id="application_photo_uploading" src="/images/ajax-loader.gif" style="display:none;" />
            </form>
        </div>
    </div>
    {% endif %}
    {% for contact in person.contacts|dictsort:"type" %}
    <div class="table_row">
        <div class="header_cell">
            {% if application_readonly %}
            {% ifequal contact.type "phone" %}{{ str.contact_phone }}{% endifequal %}
            {% ifequal contact.type "email" %}{{ str.contact_email }}{% endifequal %}
            {% ifequal contact.type "address" %}{{ str.contact_address }}{% endifequal %}
            {% ifequal contact.type "skype" %}{{ str.contact_skype }}{% endifequal %}
            :
            {% else %}
            <select id="autosave_contact_type" class="autosave_contact_type" name="contact_type"{% if application_readonly %} disabled{% endif %}>
                <option value="phone"{% ifequal contact.type "phone" %} selected{% endifequal %}>{{ str.contact_phone }}</option>
                <option value="email"{% ifequal contact.type "email" %} selected{% endifequal %}>{{ str.contact_email }}</option>
                <option value="address"{% ifequal contact.type "address" %} selected{% endifequal %}>{{ str.contact_address }}</option>
                <option value="skype"{% ifequal contact.type "skype" %} selected{% endifequal %}>{{ str.contact_skype }}</option>
            </select>:
            {% endif %}
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {{ contact.value|default:"" }}
            {% else %}
            <input type="text" class="autosave_contact_value" name="contact_value" value="{{ contact.value }}" alt="{{ contact.key }}" maxlength="500" style="width:300px;" />
            {% endif %}
        </div>
    </div>
    {% endfor %}
    {% if application_readonly %}{% else %}
    <div id="new_contact" class="table_row">
        <div class="header_cell">
            <select id="new_ontact_type" class="autosave_contact_type" name="contact_type">
                <option value="phone">{{ str.contact_phone }}</option>
                <option value="email">{{ str.contact_email }}</option>
                <option value="address">{{ str.contact_address }}</option>
                <option value="skype">{{ str.contact_skype }}</option>
            </select>:
        </div>
        <div class="table_cell">
            <input type="text" id="new_contact_value" class="autosave_contact_value" name="contact_value" maxlength="500" style="width:300px;">
        </div>
    </div>
    {% endif %}
</div>

{% if application_readonly %}{% else %}
<script>
    $(document).ready(function(){


        //DECODE IDCODE
        $('#idcode').keyup(function() {
            var idcode = $(this).val();
            var day = parseInt(idcode.substring(5, 7), 10);
            var month = parseInt(idcode.substring(3, 5), 10);
            var year = $(this).val().substring(1, 3);
            var fullyear;

            if(idcode.substring(0, 1) < 7) fullyear = ('20' + year);
            if(idcode.substring(0, 1) < 5) fullyear = ('19' + year);
            if(idcode.substring(0, 1) < 3) fullyear = ('18' + year);

            $('#birthdate_day').val(day);
            $('#birthdate_month').val(month);
            $('#birthdate_year').val(fullyear);

            var input = $('#birthdate');
            if($('#birthdate_day').val() && $('#birthdate_month').val() && $('#birthdate_year').val()) {
                input.val($('#birthdate_day').val() + '.' + $('#birthdate_month').val() + '.' + $('#birthdate_year').val());
            } else {
                input.val('');
            }
            autoSave(input, '{{ post_url }}/person', {});

            g = parseInt(idcode.substring(0, 1));
            if (g%2 == 0) {
                $('#gender').val('female');
            } else {
                $('#gender').val('male');
            }

            var input = $('#gender');
            autoSave(input, '{{ post_url }}/person', {});

        });


        //AUTOSAVE
        $('.autosave_person').change(function() {
            autoSave($(this), '{{ post_url }}/person', {});
        });

        $('.autosave_birthdate').change(function() {
            var input = $('#birthdate');
            if($('#birthdate_day').val() && $('#birthdate_month').val() && $('#birthdate_year').val()) {
                input.val($('#birthdate_day').val() + '.' + $('#birthdate_month').val() + '.' + $('#birthdate_year').val());
            } else {
                input.val('');
            }
            autoSave(input, '{{ post_url }}/person', {});
        });


        //CONTACT
        $('#new_contact_value').keypress(function() {
            var newcontact = $('#new_contact').clone(true);
            $('#new_contact').after(newcontact);
            $('#new_contact').attr('id', '');
            $(this).attr('id', '');
            $(this).unbind('keypress');
        });

        $('.autosave_contact_value').change(function() {
            var value = $(this);
            var type = value.parent('.table_cell').prev('.header_cell').children('select');
            autoSave(value, '{{ post_url }}/contact', {
                type: type.val(),
            });
        });

        $('.autosave_contact_type').change(function() {
            var type = $(this);
            var value = type.parent('.header_cell').next('.table_cell').children('input');
            autoSave(value, '{{ post_url }}/contact', {
                type: type.val(),
            });
        });


        //PHOTO
        $('#application_photo').change(function() {
            $('#application_photo').hide();
            $('#application_photo_uploading').show();
            $('#application_photo_form').submit();
        });
    });

    function showPhoto(json_string){
        if(json_string) {
            var json = jQuery.parseJSON(json_string)
            key = json['key'];
            url = json['url'];
            if(url) {
                $('#application_photo_img').attr("src", url + '=s150-c').show('slow');
            }
            if(key) {
                $('#application_photo_key').val(key);
                $('#person_forename').change();
            }
        }
        $('#application_photo_uploading').hide();
        $('#application_photo').show();
    };
</script>
{% endif %}